<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Pisces","version":"8.7.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="/js/config.js"></script>
<meta name="description" content="Vue原理vue响应式原理通俗讲：data 变 视图层更着变首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法 依赖于object.propoty.definepropoty  为对象去定义一个getter和setter   弊端  无差别，无论嵌套层级多么深的对象都转换为响应式，无条件递归：栈空间消耗大  无法监听对象的新增属性和删除属性d  那怎么来解决">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue原理">
<meta property="og:url" content="http://example.com/2021/03/01/Vue%E5%8E%9F%E7%90%86/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Vue原理vue响应式原理通俗讲：data 变 视图层更着变首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法 依赖于object.propoty.definepropoty  为对象去定义一个getter和setter   弊端  无差别，无论嵌套层级多么深的对象都转换为响应式，无条件递归：栈空间消耗大  无法监听对象的新增属性和删除属性d  那怎么来解决">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2021-03-01T13:43:45.000Z">
<meta property="article:modified_time" content="2021-08-26T04:06:14.767Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/2021/03/01/Vue%E5%8E%9F%E7%90%86/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://example.com/2021/03/01/Vue%E5%8E%9F%E7%90%86/","path":"2021/03/01/Vue原理/","title":"Vue原理"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Vue原理 | Hexo</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Hexo</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-首页"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-分类"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">Vue原理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="nav-number">1.1.</span> <span class="nav-text">vue响应式原理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%9A%E4%BF%97%E8%AE%B2%EF%BC%9Adata-%E5%8F%98-%E8%A7%86%E5%9B%BE%E5%B1%82%E6%9B%B4%E7%9D%80%E5%8F%98"><span class="nav-number">1.1.1.</span> <span class="nav-text">通俗讲：data 变 视图层更着变</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A6%96%E5%85%88%E6%88%91%E9%9C%80%E8%A6%81%E5%8E%BB%E7%9B%91%E5%90%AC%E8%BF%99%E4%B8%AAdata%E7%9A%84%E6%94%B9%E5%8F%98%EF%BC%8C%E5%9B%A0%E4%B8%BA%E6%83%B3%E6%97%B6%E5%88%BB%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E6%9C%80%E6%96%B0%E7%9A%84data%E4%BB%8E%E8%80%8C%E8%A7%A6%E5%8F%91%E8%A7%86%E5%9B%BE%E6%9B%B4%E6%96%B0%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.2.</span> <span class="nav-text">首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%99%9A%E6%8B%9Fdom"><span class="nav-number">1.2.</span> <span class="nav-text">虚拟dom</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E8%99%9A%E6%8B%9Fdom"><span class="nav-number">1.2.1.</span> <span class="nav-text">为什么要用虚拟dom</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98"><span class="nav-number">1.2.2.</span> <span class="nav-text">解决了什么问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%E7%9A%84"><span class="nav-number">1.2.3.</span> <span class="nav-text">怎么解决的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%8B%E5%86%99%E8%99%9A%E6%8B%9Fdom%E6%A0%91"><span class="nav-number">1.2.4.</span> <span class="nav-text">手写虚拟dom树</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%8E%E6%BA%90%E7%A0%81%E7%9A%84%E8%A7%92%E5%BA%A6%E6%9D%A5%E5%88%86%E6%9E%90%E8%99%9A%E6%8B%9Fdom%E8%A7%86%E5%9B%BE%E6%9B%B4%E6%96%B0%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">1.2.5.</span> <span class="nav-text">从源码的角度来分析虚拟dom视图更新的过程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#diff%E7%AE%97%E6%B3%95"><span class="nav-number">1.2.6.</span> <span class="nav-text">diff算法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B"><span class="nav-number">1.3.</span> <span class="nav-text">渲染过程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E6%9D%BF%E7%BC%96%E8%AF%91"><span class="nav-number">1.3.1.</span> <span class="nav-text">模板编译</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B4%E4%B8%AA%E8%BF%87%E7%A8%8B"><span class="nav-number">1.3.2.</span> <span class="nav-text">整个过程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model"><span class="nav-number">1.4.</span> <span class="nav-text">v-model</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="nav-number">1.4.1.</span> <span class="nav-text">实现数据的双向绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.4.2.</span> <span class="nav-text">原理</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%8D%E7%9B%98%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="nav-number">1.5.</span> <span class="nav-text">复盘响应式原理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-number">1.5.1.</span> <span class="nav-text">对象属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#object-defineProperty"><span class="nav-number">1.5.2.</span> <span class="nav-text">object.defineProperty</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#observe"><span class="nav-number">1.5.3.</span> <span class="nav-text">observe</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#compile"><span class="nav-number">1.5.4.</span> <span class="nav-text">compile</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#watcher"><span class="nav-number">1.5.5.</span> <span class="nav-text">watcher</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-nexttick"><span class="nav-number">1.6.</span> <span class="nav-text">vue.nexttick</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E7%94%A8"><span class="nav-number">1.6.1.</span> <span class="nav-text">怎么用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%99%E8%BF%B0%E9%80%BB%E8%BE%91"><span class="nav-number">1.6.2.</span> <span class="nav-text">叙述逻辑</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vuex"><span class="nav-number">1.7.</span> <span class="nav-text">vuex</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">1.7.1.</span> <span class="nav-text">是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="nav-number">1.7.2.</span> <span class="nav-text">核心概念</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue3%E4%B8%BA%E4%BB%80%E4%B9%88%E5%BF%AB"><span class="nav-number">1.8.</span> <span class="nav-text">vue3为什么快</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#proxy"><span class="nav-number">1.8.1.</span> <span class="nav-text">proxy</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#patchflag"><span class="nav-number">1.8.2.</span> <span class="nav-text">patchflag</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hoiststatic"><span class="nav-number">1.8.3.</span> <span class="nav-text">hoiststatic</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86"><span class="nav-number">1.9.</span> <span class="nav-text">路由原理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E8%B7%AF%E7%94%B1"><span class="nav-number">1.9.1.</span> <span class="nav-text">为什么要有路由</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">John Doe</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">20</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">12</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
  </nav>
</div>



          </div>
        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/03/01/Vue%E5%8E%9F%E7%90%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Vue原理
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-03-01 21:43:45" itemprop="dateCreated datePublished" datetime="2021-03-01T21:43:45+08:00">2021-03-01</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="Vue原理"><a href="#Vue原理" class="headerlink" title="Vue原理"></a>Vue原理</h1><h2 id="vue响应式原理"><a href="#vue响应式原理" class="headerlink" title="vue响应式原理"></a>vue响应式原理</h2><h3 id="通俗讲：data-变-视图层更着变"><a href="#通俗讲：data-变-视图层更着变" class="headerlink" title="通俗讲：data 变 视图层更着变"></a>通俗讲：data 变 视图层更着变</h3><h3 id="首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法"><a href="#首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法" class="headerlink" title="首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法"></a>首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法</h3><ul>
<li><p>依赖于object.propoty.definepropoty</p>
<ul>
<li><p>为对象去定义一个getter和setter </p>
</li>
<li><p>弊端</p>
<ul>
<li><p>无差别，无论嵌套层级多么深的对象都转换为响应式，无条件递归：栈空间消耗大</p>
</li>
<li><p>无法监听对象的新增属性和删除属性d</p>
<ul>
<li>那怎么来解决</li>
</ul>
</li>
<li><p>无法监听数组的方法就是操作数组，调用数组的方法，我无法将其转换为响应式</p>
<ul>
<li><p>为什么无法监听原数组：因为调用数组的方法返回了最新的数组，但是并没有改变其原数组，而我监听的是原数组。</p>
</li>
<li><p>怎么来解决</p>
<ul>
<li><p>由于之前触发数组的方法 无法改变原数组，也就意味着无法触发set –》无法触发视图更新的方法</p>
</li>
<li><p>基本的思路：那我现在就去重写方法，然后去手动调用这个视图更新的方法</p>
</li>
<li><p>通过object.create() 将数组原型进行隔离，不要去干扰改写原数组的原型</p>
<ul>
<li>这个思路就是寄生组合继承的原理</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="虚拟dom"><a href="#虚拟dom" class="headerlink" title="虚拟dom"></a>虚拟dom</h2><h3 id="为什么要用虚拟dom"><a href="#为什么要用虚拟dom" class="headerlink" title="为什么要用虚拟dom"></a>为什么要用虚拟dom</h3><ul>
<li><p>跨平台，因为dom与平台强相关联，因为虚拟dom本质上是js对象，可以进行跨平台操作</p>
<ul>
<li>react-native</li>
<li>weex</li>
<li>都用的是虚拟dom</li>
</ul>
</li>
<li><p>防止无效渲染</p>
</li>
<li><p>子主题</p>
</li>
</ul>
<h3 id="解决了什么问题"><a href="#解决了什么问题" class="headerlink" title="解决了什么问题"></a>解决了什么问题</h3><ul>
<li><p>如果我操作dom前后实际内容没有变化：那没有虚拟dom就白渲染了两次 </p>
</li>
<li><p>操作真实的dom会触发渲染耗费性能，所以用虚拟dom</p>
<ul>
<li><p>渲染为什么耗费性能</p>
<ul>
<li>dom树的构建</li>
<li>css树的构建</li>
<li>render树的构建</li>
<li>布局</li>
<li>绘制等</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="怎么解决的"><a href="#怎么解决的" class="headerlink" title="怎么解决的"></a>怎么解决的</h3><ul>
<li>使用js去模拟dom之后再去通过diff算法计算出最小的变更，之后再去操作真实的dom进行局部渲染。</li>
</ul>
<h3 id="手写虚拟dom树"><a href="#手写虚拟dom树" class="headerlink" title="手写虚拟dom树"></a>手写虚拟dom树</h3><h3 id="从源码的角度来分析虚拟dom视图更新的过程"><a href="#从源码的角度来分析虚拟dom视图更新的过程" class="headerlink" title="从源码的角度来分析虚拟dom视图更新的过程"></a>从源码的角度来分析虚拟dom视图更新的过程</h3><h3 id="diff算法"><a href="#diff算法" class="headerlink" title="diff算法"></a>diff算法</h3><ul>
<li><p>patch(oldvnode,newvnode)</p>
<ul>
<li><p>依赖于patch函数比较新老节点</p>
<ul>
<li><p>新节点不存在，直接删除老节点</p>
<ul>
<li>说明直接删除dom了</li>
</ul>
</li>
<li><p>如果老节点不存在，直接去创建一个新的节点</p>
</li>
<li><p>相同节点直接进入到 patchvnode比较子节点</p>
<ul>
<li><p>怎么来判断是否是相同的节点</p>
<ul>
<li>key</li>
<li>tagname</li>
<li>input还有比较type 类型</li>
</ul>
</li>
<li><p>比较虚拟dom节点内部</p>
<ul>
<li><p>两节点完全相同直接去返回</p>
</li>
<li><p>虚拟dom的children是textnode</p>
<ul>
<li>直接去更新text</li>
</ul>
</li>
<li><p>如不是：</p>
<ul>
<li><p>新节点存在，无旧节点</p>
<ul>
<li>创建新的</li>
</ul>
</li>
<li><p>旧节点存在，新节点不存在</p>
<ul>
<li>删除旧节点</li>
</ul>
</li>
<li><p>新旧dom都存在：调用updatechildren比较子节点差异</p>
<ul>
<li><p>四个方向进行循环比较：依赖对撞指针进行操作</p>
<ul>
<li>先头头比较</li>
<li>尾尾比较</li>
<li>头和尾</li>
<li>尾和头</li>
</ul>
</li>
<li><p>如果找到了相同的元素将其插入到真实dom序列的头部</p>
</li>
<li><p>结束循环后</p>
</li>
<li><p>为什么要有key 如果没有patch逻辑发现，没有相同元素，那就默认直接删除旧dom全部重新生成新dom进行更新，消耗太大</p>
<ul>
<li>tag 标签，基本每次都一一样，而没有Key做为比对，是不够精确的</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>时间复杂度</p>
<ul>
<li><p>为什么要同层比较</p>
<ul>
<li>原因在于降低时间复杂度</li>
<li>如果先递归到底，然后遍历另一颗树，最后再去排序时间复杂度太高了</li>
</ul>
</li>
</ul>
</li>
<li><p>v-for为什么要有key</p>
<ul>
<li>对于v-for每次都循环出相同的标签，那么没有key做唯一的标识自然无法去判断新旧节点是否相同，他觉得都不相同，只能销毁旧dom去重新创建新dom</li>
</ul>
</li>
</ul>
<h2 id="渲染过程"><a href="#渲染过程" class="headerlink" title="渲染过程"></a>渲染过程</h2><h3 id="模板编译"><a href="#模板编译" class="headerlink" title="模板编译"></a>模板编译</h3><ul>
<li><p>编译为render函数</p>
<ul>
<li>返回虚拟dom</li>
</ul>
</li>
<li><p>基于虚拟dom实现patch 和diff算法寻找最小差异点</p>
</li>
<li><p>Subtopic</p>
</li>
</ul>
<h3 id="整个过程"><a href="#整个过程" class="headerlink" title="整个过程"></a>整个过程</h3><ul>
<li><p>初次渲染</p>
<ul>
<li><p>解析模板为render函数</p>
</li>
<li><p>触发响应式监听data数据</p>
<ul>
<li><p>触发getter</p>
<ul>
<li>如果模板中用到了你所定义的data的话</li>
</ul>
</li>
<li><p>初次不涉及修改自然不会去触发setter</p>
</li>
</ul>
</li>
<li><p>执行render函数，生成相应的虚拟dom，之后再去触发patch（）（diff算法）</p>
</li>
</ul>
</li>
<li><p>更新渲染</p>
<ul>
<li>因为之前对data做了监听，修改后会触发相应的setter</li>
<li>数据变，虚拟dom肯定要变，所以再次调用render函数生成新虚拟dom</li>
<li>再去使用patch函数</li>
</ul>
</li>
<li><p>特点</p>
<ul>
<li><p>异步渲染</p>
<ul>
<li><p>汇总dom的修改</p>
</li>
<li><p>nextttick</p>
<ul>
<li>由于vue是异步渲染因此想拿到最新dom，整个api就是等vue渲染完毕后才去执行相应的回调</li>
</ul>
</li>
<li><p>子主题</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><h3 id="实现数据的双向绑定"><a href="#实现数据的双向绑定" class="headerlink" title="实现数据的双向绑定"></a>实现数据的双向绑定</h3><h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><ul>
<li>首先绑定value，值为你所绑定的元素</li>
<li>当input值发生了变动触发input事件，从而去改变这个绑定值：借助event.target.value（实时输入框的值）</li>
<li>通过响应式原理，监听inputvalue,变动后，触发视图更新</li>
</ul>
<h2 id="复盘响应式原理"><a href="#复盘响应式原理" class="headerlink" title="复盘响应式原理"></a>复盘响应式原理</h2><h3 id="对象属性"><a href="#对象属性" class="headerlink" title="对象属性"></a>对象属性</h3><ul>
<li><p>数据属性</p>
</li>
<li><p>存取器属性</p>
<ul>
<li>取值getter</li>
<li>设置值setter</li>
</ul>
</li>
</ul>
<h3 id="object-defineProperty"><a href="#object-defineProperty" class="headerlink" title="object.defineProperty"></a>object.defineProperty</h3><h3 id="observe"><a href="#observe" class="headerlink" title="observe"></a>observe</h3><ul>
<li><p>为每一个对象绑定getter 和setter</p>
</li>
<li><p>向dep订阅者通知变化</p>
<ul>
<li><p>每当同一个属性用到了多个指令</p>
<ul>
<li>v-model=name</li>
<li></li>
</ul>
</li>
<li><p>那就单独向dep中增加一个订阅者</p>
<ul>
<li><p>那这个订阅者哪里来的</p>
<ul>
<li>Subtopic</li>
</ul>
</li>
</ul>
</li>
<li><p>当属性的setter触发要去更新值，那就调用notify循环更新队列里的订阅者</p>
</li>
</ul>
</li>
</ul>
<h3 id="compile"><a href="#compile" class="headerlink" title="compile"></a>compile</h3><ul>
<li><p>初始化时将模板指令里的变量替换为数据</p>
</li>
<li><p>监听数据的改动，通过watcher为其绑定更新函数</p>
<ul>
<li>绑定后就生成了一个订阅者并向dep中去添加它</li>
</ul>
</li>
<li><p>最后dep再次通知watcher</p>
<ul>
<li>watcher调用其自身的update方法并触发coml;ier里的回调去更新视图</li>
</ul>
</li>
</ul>
<h3 id="watcher"><a href="#watcher" class="headerlink" title="watcher"></a>watcher</h3><ul>
<li>Subtopic</li>
</ul>
<h2 id="vue-nexttick"><a href="#vue-nexttick" class="headerlink" title="vue.nexttick"></a>vue.nexttick</h2><h3 id="怎么用"><a href="#怎么用" class="headerlink" title="怎么用"></a>怎么用</h3><ul>
<li><p>当需要获取到最新dom结构</p>
<ul>
<li>因为vue是异步跟新，当dom结构发生了变化，dom节点不一定更新</li>
</ul>
</li>
</ul>
<h3 id="叙述逻辑"><a href="#叙述逻辑" class="headerlink" title="叙述逻辑"></a>叙述逻辑</h3><ul>
<li><p>首先我说一下事件循环机制里的 渲染时机是微任务执行完毕后去渲染的</p>
</li>
<li><p>那如果要在异步任务中去更新dom，应该将其包装为微任务，如果包装为宏任务，会导致多渲染一次</p>
</li>
<li><p>在vue中是以异步更新机制，避免重复渲染，如果采取同步渲染会导致，操作一次dom，就去更新一次</p>
</li>
<li><p>子主题</p>
</li>
<li><p>那在vue中去更新一个状态，要将其包装为一个异步操作，派发出去执行，依赖vue.nexttick 去执行</p>
</li>
<li><p>源码怎么做的</p>
<ul>
<li><p>之后检查pending锁是为了避免之前的异步任务未执行完毕，再次派发任务导致混乱</p>
<ul>
<li>首先会将内部的回调推入到callbacks数组里面</li>
<li>用timefunc方法，将其包装</li>
<li>将操作优先包装为promise任务</li>
<li>在考虑 mutation observe</li>
<li>再去考虑 settimmedia</li>
<li>最后考虑包装为settimout任务</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><h3 id="是什么"><a href="#是什么" class="headerlink" title="是什么"></a>是什么</h3><ul>
<li>集中管理全局状态的库，state数据是响应式的，一旦数据发生改变，用到这个数据的组件状态都会发生改变，全局组件中比较常用，因为可能在任意组件中去引用它，这样能够更加方便的去管理其状态</li>
</ul>
<h3 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h3><ul>
<li><p>state</p>
<ul>
<li>state数据存储的是响应式的，先通过引入usestore再通过computed 返回state数据，类似ref对象</li>
</ul>
</li>
<li><p>actions</p>
</li>
<li><p>mutations</p>
</li>
<li><p>module</p>
</li>
<li><p>getter</p>
</li>
</ul>
<h2 id="vue3为什么快"><a href="#vue3为什么快" class="headerlink" title="vue3为什么快"></a>vue3为什么快</h2><h3 id="proxy"><a href="#proxy" class="headerlink" title="proxy"></a>proxy</h3><h3 id="patchflag"><a href="#patchflag" class="headerlink" title="patchflag"></a>patchflag</h3><h3 id="hoiststatic"><a href="#hoiststatic" class="headerlink" title="hoiststatic"></a>hoiststatic</h3><h2 id="路由原理"><a href="#路由原理" class="headerlink" title="路由原理"></a>路由原理</h2><h3 id="为什么要有路由"><a href="#为什么要有路由" class="headerlink" title="为什么要有路由"></a>为什么要有路由</h3><ul>
<li><p>为了解决spa</p>
<ul>
<li><p>实现不刷新页面的基础上，进行数据刷新</p>
</li>
<li><p>弊端在于，无法进行定位</p>
<ul>
<li><p>hash</p>
<ul>
<li>通过windo.location.hash修改url</li>
<li>通过hashchange事件进行监听</li>
</ul>
</li>
<li><p>history</p>
<ul>
<li>history.pushstate，修改浏览器的历史</li>
<li>history.replacestate</li>
<li>最后通过popstate 进行监听</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><em>XMind - Evaluation Version</em></p>

    </div>

    
    
    

    <footer class="post-footer">

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/01/19/V8%E5%BC%95%E6%93%8E/" rel="prev" title="v8引擎基础梳理">
                  <i class="fa fa-chevron-left"></i> v8引擎基础梳理
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/03/12/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9E%84%E9%80%A0/" rel="next" title="浏览器">
                  浏览器 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">John Doe</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener" target="_blank">NexT.Pisces</a>
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  




  





</body>
</html>
